import {designPage, reactive, useRefs} from "@peryl/react-compose";

import {$message, Alert, Button, ButtonGroup, Checkbox, Input, iTableOperation, iTreeNode, iTreeProps, Plc, PlcIndex, PlcOperation, PlcTree, Segment, SegmentGroup, Table, tPlcType} from "plain-design";
import {deepcopy} from "@peryl/utils/deepcopy";
import {DemoRow} from "src/common/DemoRow";
import {useDemoData} from "../../common/useDemoData";


export default designPage(() => {

  const demoAddressData = useDemoData('data/address_zhcn.json', { onLoad: newData => {addressData = [...newData];} });
  const demoTreeData = useDemoData('data/tree.data.json', { onLoad: newData => {treeData = [...newData];} });

  let treeData: any[] = [];
  let addressData: any[] = [];

  const Demo1 = designPage(() => {

    const { refs, onRef } = useRefs({ tree: PlcTree });

    const handler = {
      onClickHead: (plc: tPlcType) => {
        console.log('click head', plc.props.title);
      },
    };

    return () => (
      <DemoRow title="基本用法">
        <ButtonGroup style={{ marginBottom: '12px' }}>
          <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
          <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
          <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
          <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
          <Button label="当前选中节点" onClick={() => {
            const current = refs.tree!.methods.getCurrent();
            $message(!!current ? current.data.name : '未选中任何节点！');
          }}/>
          <Button label="展开并且设置当前选中节点" onClick={() => {
            refs.tree!.methods.expand('2-2-2');
            refs.tree!.methods.setCurrent('2-2-2');
          }}/>
        </ButtonGroup>
        <Table onClickHead={handler.onClickHead}>
          <PlcIndex/>
          <PlcTree
            data={treeData}
            ref={onRef.tree}
            title={'名称'}
            field="name"
            keyField="id"
            childrenField="subs"
          />
          <Plc title={'编号'} field={'id'}/>
          <Plc title={'名称'} field={'name'}/>
        </Table>
      </DemoRow>
    );
  });

  const DemoSingle = designPage(() => {
    const { refs, onRef } = useRefs({ tree: PlcTree });

    const state = reactive({
      current: null as any,
      checkLast: false,
    });

    return () => (
      <DemoRow title="单选绑定(singleValueType=last)">

        <ButtonGroup style={{ display: 'inline-block', marginBottom: '12px' }}>
          <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
          <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
          <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
          <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
          <Button onClick={() => {state.checkLast = !state.checkLast;}}>
            <Checkbox v-model={state.checkLast} customReadonly/>
            <span>只能选择叶子节点</span>
          </Button>
          <Button label="当前选中节点" onClick={() => {$message(state.current?.name || '无选中任何节点');}}/>
          <Button label="展开并且设置当前选中节点" onClick={() => {
            refs.tree!.methods.expand('2-2-2');
            refs.tree!.methods.setCurrent('2-2-2');
          }}/>
        </ButtonGroup>

        <Button mode="fill">单值绑定：{state.current?.name || '无选中任何节点'}</Button>

        <Table>
          <PlcIndex/>
          <PlcTree
            title={'名称'}
            v-model={state.current}
            ref={onRef.tree}
            data={treeData}
            keyField="id"
            field="name"
            childrenField="subs"
            defaultExpandAll
            singleValueType="last"
            checkLast={state.checkLast}
          />
          <Plc title={'编号'} field={'id'}/>
          <Plc title={'名称'} field={'name'}/>
        </Table>
      </DemoRow>
    );
  });

  const DemoSingleAll = designPage(() => {
    const { refs, onRef } = useRefs({ tree: PlcTree });

    const state = reactive({
      current: null as null | any[],
      checkLast: false,
    });

    return () => (
      <DemoRow title="单选绑定(singleValueType=all)">

        <ButtonGroup style={{ display: 'inline-block' }}>
          <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
          <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
          <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
          <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
          <Button onClick={() => {state.checkLast = !state.checkLast;}}>
            <Checkbox v-model={state.checkLast} customReadonly/>
            <span>只能选择叶子节点</span>
          </Button>
          <Button label="展开并且设置当前选中节点" onClick={() => {
            refs.tree!.methods.expand('2-2-2');
            refs.tree!.methods.setCurrent('2-2-2');
          }}/>
        </ButtonGroup>

        <Button mode="fill">单值绑定：{(!state.current || state.current.length === 0 ? null : state.current.map(i => i.name).join('/')) || '无选中任何节点'}</Button>

        <Table>
          <PlcIndex/>
          <PlcTree
            title={'名称'}
            v-model={state.current}
            ref={onRef.tree}
            data={treeData}
            keyField="id"
            field="name"
            childrenField="subs"
            defaultExpandAll
            singleValueType="all"
            checkLast={state.checkLast}
          />
          <Plc title={'编号'} field={'id'}/>
          <Plc title={'名称'} field={'name'}/>
        </Table>
      </DemoRow>
    );
  });

  const DemoMultiple = designPage(() => {
    const { refs, onRef } = useRefs({ tree: PlcTree });

    const state = reactive({
      checked: [] as any[],
      checkLast: false,
    });

    return () => (
      <DemoRow title="多选绑定多值">

        <ButtonGroup style={{ display: 'inline-block' }}>
          <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
          <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
          <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
          <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
          <Button label="当前选中节点" onClick={() => {
            const current = refs.tree!.methods.getCurrent();
            $message(!!current ? current.data.name : '未选中任何节点！');
          }}/>
          <Button onClick={() => {state.checkLast = !state.checkLast;}}>
            <Checkbox v-model={state.checkLast} customReadonly/>
            <span>只能选择叶子节点</span>
          </Button>
          <Button label="展开并且设置当前选中节点" onClick={() => {
            refs.tree!.methods.expand('2-2-2');
            refs.tree!.methods.setCurrent('2-2-2');
          }}/>
        </ButtonGroup>

        <ButtonGroup style={{ margin: '4px 0' }}>
          <Button onClick={() => {$message(state.checked?.map(i => i.name).join('_'));}}>获取绑定节点</Button>
          <Button mode="fill">多值绑定：{state.checked?.map(i => i.name).join('，')}</Button>
        </ButtonGroup>

        <ButtonGroup style={{ margin: '4px 0' }}>
          <Button label="全部选中" onClick={() => refs.tree!.methods.checkAll()}/>
          <Button label="全部取消" onClick={() => refs.tree!.methods.unCheckAll()}/>
          <Button label="根据key选中部分节点" onClick={() => refs.tree!.methods.check(['2-2-2', '3-1-2', '3-2-1'])}/>
        </ButtonGroup>
        <Table>
          <PlcIndex/>
          <PlcTree
            title={'名称'}
            v-model={state.checked}
            multiple
            ref={onRef.tree}
            data={treeData}
            keyField="id"
            field="name"
            childrenField="subs"
            defaultExpandAll
            checkLast={state.checkLast}
          />
          <Plc title={'编号'} field={'id'}/>
          <Plc title={'名称'} field={'name'}/>
        </Table>
      </DemoRow>
    );
  });

  const DemoSize = designPage(() => {

    const { refs, onRef } = useRefs({ tree: PlcTree });
    const state = reactive({
      size: 'normal' as any
    });

    return () => (
      <DemoRow title="大小尺寸">
        <SegmentGroup v-model={state.size} style={{ marginBottom: '16px' }}>
          <Segment label="Mini" val="mini"/>
          <Segment label="Small" val="small"/>
          <Segment label="Normal" val="normal"/>
          <Segment label="Large" val="large"/>
        </SegmentGroup>
        <ButtonGroup style={{ margin: '4px 0' }}>
          <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
          <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
          <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
          <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
          <Button label="当前选中节点" onClick={() => {
            const current = refs.tree!.methods.getCurrent();
            $message(!!current ? current.data.name : '未选中任何节点！');
          }}/>
          <Button label="展开并且设置当前选中节点" onClick={() => {
            refs.tree!.methods.expand('2-2-2');
            refs.tree!.methods.setCurrent('2-2-2');
          }}/>
        </ButtonGroup>
        <Table size={state.size}>
          <PlcIndex/>
          <PlcTree
            title={'名称'}
            ref={onRef.tree}
            data={treeData}
            keyField="id"
            field="name"
            childrenField="subs"
          />
          <Plc title={'编号'} field={'id'}/>
          <Plc title={'名称'} field={'name'}/>
        </Table>
      </DemoRow>
    );
  });

  const DemoLazy = designPage(() => {

    const { refs, onRef } = useRefs({ tree: PlcTree });

    const state = reactive({
      data: [] as any,
    });

    const lazyDemo = {
      treeData: [],
      isLeaf: (treeNode: iTreeNode) => {
        return treeNode.level >= 3;
      },
      getChildrenData: async (treeNode: iTreeNode | null) => {
        if (!treeNode) {
          console.log('getChildrenData:root');
          return lazyDemo.getCitiesByParentId(null);
        } else {
          console.log('getChildrenData', treeNode.data);
          return lazyDemo.getCitiesByParentId(treeNode.data.id);
        }
      },
      getCitiesByParentId(parentId: string | null) {
        return new Promise<any[]>((resolve) => {
          // 这个是模拟在数据库表中的数据
          const data = [
            { id: '1', name: '广东省', level: 1, parentId: null, subs: [] },
            { id: '2', name: '佛山市', level: 2, parentId: '1', subs: [] },
            { id: '3', name: '深圳市', level: 2, parentId: '1', subs: [] },
            { id: '4', name: '禅城区', level: 3, parentId: '2', subs: [] },
            { id: '5', name: '南山区', level: 3, parentId: '3', subs: [] },

            { id: '6', name: '湖南省', level: 1, parentId: null, subs: [] },
            { id: '7', name: '长沙市', level: 2, parentId: '6', subs: [] },
            { id: '8', name: '邵阳市', level: 2, parentId: '6', subs: [] },
            { id: '9', name: '天心区', level: 3, parentId: '7', subs: [] },

            { id: '11', name: '陕西省', level: 1, parentId: null, subs: [] },
          ];

          // 模拟请求，请求时间大概在1s-2s之间
          setTimeout(() => {
            resolve(data.filter(item => item.parentId === parentId));
          }, Math.random() * 1000 + 1000);
        });
      },
    };

    return () => (
      <DemoRow title="懒加载子节点">
        <Table>
          <PlcIndex/>
          <PlcTree
            title={'名称'}
            ref={onRef.tree}
            v-model:data={state.data}
            keyField="id"
            field="name"
            childrenField="subs"
            lazy
            isLeaf={lazyDemo.isLeaf}
            getChildrenData={lazyDemo.getChildrenData}
          />
          <Plc title={'编号'} field={'id'}/>
          <Plc title={'名称'} field={'name'}/>
        </Table>
      </DemoRow>
    );
  });

  const DemoMultipleStrict = designPage(() => {
    const { refs, onRef } = useRefs({ tree: PlcTree });

    const state = reactive({
      checked: [] as any[],
    });

    return () => (
      <DemoRow title="多选绑定多值(互不关联)">

        <ButtonGroup style={{ display: 'inline-block' }}>
          <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
          <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
          <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
          <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
          <Button label="当前选中节点" onClick={() => {
            const current = refs.tree!.methods.getCurrent();
            $message(!!current ? current.data.name : '未选中任何节点！');
          }}/>
          <Button label="展开并且设置当前选中节点" onClick={() => {
            refs.tree!.methods.expand('2-2-2');
            refs.tree!.methods.setCurrent('2-2-2');
          }}/>
        </ButtonGroup>

        <ButtonGroup style={{ margin: '4px 0' }}>
          <Button onClick={() => {$message(state.checked?.map(i => i.name).join('_'));}}>获取绑定节点</Button>
          <Button mode="fill">多值绑定：{state.checked?.map(i => i.name).join('，')}</Button>
        </ButtonGroup>

        <ButtonGroup style={{ margin: '4px 0' }}>
          <Button label="全部选中" onClick={() => refs.tree!.methods.checkAll()}/>
          <Button label="全部取消" onClick={() => refs.tree!.methods.unCheckAll()}/>
          <Button label="根据key选中部分节点" onClick={() => refs.tree!.methods.check(['2-2-2', '3-1-2', '3-2-1'])}/>
        </ButtonGroup>
        <Table>
          <PlcIndex/>
          <PlcTree
            title={'名称'}
            v-model={state.checked}
            multiple
            ref={onRef.tree}
            data={treeData}
            keyField="id"
            field="name"
            childrenField="subs"
            defaultExpandAll
            checkStrictly
          />
          <Plc title={'编号'} field={'id'}/>
          <Plc title={'名称'} field={'name'}/>
        </Table>
      </DemoRow>
    );
  });

  const DemoMultipleDisableCheck = designPage(() => {
    const { refs, onRef } = useRefs({ tree: PlcTree });

    const state = reactive({
      checked: [] as any[],
    });

    const isCheckAble = (data: any) => {
      return data.id.endsWith('1');
    };

    return () => (
      <DemoRow title="禁用选中">

        <ButtonGroup style={{ display: 'inline-block' }}>
          <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
          <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
          <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
          <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
          <Button label="当前选中节点" onClick={() => {
            const current = refs.tree!.methods.getCurrent();
            $message(!!current ? current.data.name : '未选中任何节点！');
          }}/>
          <Button label="展开并且设置当前选中节点" onClick={() => {
            refs.tree!.methods.expand('2-2-2');
            refs.tree!.methods.setCurrent('2-2-2');
          }}/>
        </ButtonGroup>

        <ButtonGroup style={{ margin: '4px 0' }}>
          <Button onClick={() => {$message(state.checked?.map(i => i.name).join('_'));}}>获取绑定节点</Button>
          <Button mode="fill">多值绑定：{state.checked?.map(i => i.name).join('，')}</Button>
        </ButtonGroup>

        <ButtonGroup style={{ margin: '4px 0' }}>
          <Button label="全部选中" onClick={() => refs.tree!.methods.checkAll()}/>
          <Button label="全部取消" onClick={() => refs.tree!.methods.unCheckAll()}/>
          <Button label="根据key选中部分节点" onClick={() => refs.tree!.methods.check(['2-2-2', '3-1-2', '3-2-1'])}/>
        </ButtonGroup>

        <Table>
          <PlcIndex/>
          <PlcTree
            title={'名称'}
            v-model={state.checked}
            multiple
            ref={onRef.tree}
            data={treeData}
            keyField="id"
            field="name"
            childrenField="subs"
            defaultExpandAll
            isCheckAble={isCheckAble}
          />
          <Plc title={'编号'} field={'id'}/>
          <Plc title={'名称'} field={'name'}/>
        </Table>
      </DemoRow>
    );
  });

  const DemoScopedSlot = designPage(() => {
    const { refs, onRef } = useRefs({ tree: PlcTree });

    const state = reactive({
      checked: [] as any[],
    });

    const buildIndex = (treeNode: iTreeNode) => {
      return [treeNode, ...treeNode.parents()].reverse().map(i => i!.index + 1).join('.');
    };

    const scopedSlotDemo = {
      treeData: deepcopy(treeData),
      addItem: async (treeNode: iTreeNode) => {
        const { data } = treeNode;
        const subs = data.subs || [];
        const name = `n-${data.id}-${subs.length + 1}`;
        const id = name + Date.now().toString();
        subs.push({ id, name: `new item ${name}`, });
        // 这里触发响应式更新，单独修改subs数组可能不会触发视图更新
        data.subs = [...subs];
        refs.tree!.methods.refreshCheckStatus(treeNode);
        refs.tree!.methods.expand(id);
      },
      deleteItem: (treeNode: iTreeNode) => {
        let { data, parent } = treeNode;
        const subs = parent!.data.subs as any[];
        const ids = subs.map(item => item.id);

        subs.splice(ids.indexOf(data.id), 1);
        if (subs.length === 0) {
          parent!.data.subs = null;
        }
        refs.tree!.methods.refreshCheckStatus(treeNode.parent!);
        refs.tree!.methods.clearInvalidChecked();
      },
      clear: (e: MouseEvent, treeNode: iTreeNode) => {
        e.stopPropagation();
        treeNode.data.subs = null;
        refs.tree!.methods.clearInvalidChecked();
      },
    };

    const operations: iTableOperation[] = [
      { label: '添加', position: 'inner', handler: ({ node }) => scopedSlotDemo.addItem(refs.tree!.getTreeNodes()[node.state.index]) },
      { label: '删除', position: 'inner', handler: ({ node }) => scopedSlotDemo.deleteItem(refs.tree!.getTreeNodes()[node.state.index]) },
    ];

    return () => (
      <DemoRow title="插槽渲染内容">

        <ButtonGroup style={{ display: 'inline-block' }}>
          <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
          <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
          <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
          <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
          <Button label="当前选中节点" onClick={() => {
            const current = refs.tree!.methods.getCurrent();
            $message(!!current ? current.data.name : '未选中任何节点！');
          }}/>
          <Button label="展开并且设置当前选中节点" onClick={() => {
            refs.tree!.methods.expand('2-2-2');
            refs.tree!.methods.setCurrent('2-2-2');
          }}/>
        </ButtonGroup>

        <ButtonGroup style={{ margin: '4px 0' }}>
          <Button onClick={() => {$message(state.checked?.map(i => i.name).join('_'));}}>获取绑定节点</Button>
          <Button mode="fill">多值绑定：{state.checked?.map(i => i.name).join('，')}</Button>
        </ButtonGroup>

        <ButtonGroup style={{ margin: '4px 0' }}>
          <Button label="全部选中" onClick={() => refs.tree!.methods.checkAll()}/>
          <Button label="全部取消" onClick={() => refs.tree!.methods.unCheckAll()}/>
          <Button label="根据key选中部分节点" onClick={() => refs.tree!.methods.check(['2-2-2', '3-1-2', '3-2-1'])}/>
        </ButtonGroup>

        <Table showRows={10}>
          <PlcIndex/>
          <PlcTree
            title={'名称'}
            v-model={state.checked}
            multiple
            ref={onRef.tree}
            data={scopedSlotDemo.treeData}
            keyField="id"
            field="name"
            childrenField="subs"
            defaultExpandAll
            style={{ width: '500px' }}
            v-slots={{
              content: ({ treeNode, tableNode }) => <span key={treeNode.key}>{buildIndex(treeNode)}{tableNode.data.name}</span>
            }}
          />
          <Plc title={'编号'} field={'id'}/>
          <Plc title={'名称'} field={'name'}/>
          <PlcOperation operations={operations}/>
        </Table>
      </DemoRow>
    );
  });

  const DemoNodeIcon = designPage(() => {

    const { refs, onRef } = useRefs({ tree: PlcTree });

    const nodeIcon: iTreeProps['nodeIcon'] = treeNode => treeNode.isLeaf() ? 'pi-star' : 'pi-star-fill';

    return () => (
      <DemoRow title="节点图标">
        <ButtonGroup style={{ margin: '4px 0' }}>
          <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
          <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
          <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
          <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
          <Button label="当前选中节点" onClick={() => {
            const current = refs.tree!.methods.getCurrent();
            $message(!!current ? current.data.name : '未选中任何节点！');
          }}/>
          <Button label="展开并且设置当前选中节点" onClick={() => {
            refs.tree!.methods.expand('2-2-2');
            refs.tree!.methods.setCurrent('2-2-2');
          }}/>
        </ButtonGroup>

        <Table showRows={10}>
          <PlcIndex/>
          <PlcTree
            title={'名称'}
            ref={onRef.tree}
            data={treeData}
            keyField="id"
            field="name"
            childrenField="subs"
            nodeIcon={nodeIcon}
          />
          <Plc title={'编号'} field={'id'}/>
          <Plc title={'名称'} field={'name'}/>
        </Table>
      </DemoRow>
    );
  });

  const DemoAccording = designPage(() => {

    const { refs, onRef } = useRefs({ tree: PlcTree });

    return () => (
      <DemoRow title="手风琴模式，打开节点的时候关闭兄弟节点">
        <ButtonGroup style={{ margin: '4px 0' }}>
          <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
          <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
          <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
          <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
          <Button label="当前选中节点" onClick={() => {
            const current = refs.tree!.methods.getCurrent();
            $message(!!current ? current.data.name : '未选中任何节点！');
          }}/>
          <Button label="展开并且设置当前选中节点" onClick={() => {
            refs.tree!.methods.expand('2-2-2');
            refs.tree!.methods.setCurrent('2-2-2');
          }}/>
        </ButtonGroup>
        <Table showRows={10}>
          <PlcIndex/>
          <PlcTree
            title={'名称'}
            ref={onRef.tree}
            data={treeData}
            keyField="id"
            field="name"
            childrenField="subs"
            according
          />
          <Plc title={'编号'} field={'id'}/>
          <Plc title={'名称'} field={'name'}/>
        </Table>
      </DemoRow>
    );
  });

  const DemoFilter = designPage(() => {

    const { refs, onRef } = useRefs({ tree: PlcTree });

    const state = reactive({
      filterText: null as any
    });

    return () => (
      <DemoRow title="可筛选">
        <Input v-model={state.filterText} width="200px" suffixIcon="pi-search" style={{ marginBottom: '4px' }} placeholder="search keywords"/>
        <ButtonGroup style={{ margin: '4px 0' }}>
          <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
          <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
          <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
          <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
          <Button label="当前选中节点" onClick={() => {
            const current = refs.tree!.methods.getCurrent();
            $message(!!current ? current.data.name : '未选中任何节点！');
          }}/>
          <Button label="展开并且设置当前选中节点" onClick={() => {
            refs.tree!.methods.expand('2-2-2');
            refs.tree!.methods.setCurrent('2-2-2');
          }}/>
        </ButtonGroup>

        <Table showRows={10}>
          <PlcIndex/>
          <PlcTree
            title={'名称'}
            ref={onRef.tree}
            data={treeData}
            keyField="id"
            field="name"
            childrenField="subs"
            filterText={state.filterText}
            defaultExpandAll
          />
          <Plc title={'编号'} field={'id'}/>
          <Plc title={'名称'} field={'name'}/>
        </Table>
      </DemoRow>
    );
  });

  const DemoIcon = designPage(() => {

    const { refs, onRef } = useRefs({ tree: PlcTree });

    return () => (
      <DemoRow title="展开图标">
        <ButtonGroup style={{ margin: '4px 0' }}>
          <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
          <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
          <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
          <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
          <Button label="当前选中节点" onClick={() => {
            const current = refs.tree!.methods.getCurrent();
            $message(!!current ? current.data.name : '未选中任何节点！');
          }}/>
          <Button label="展开并且设置当前选中节点" onClick={() => {
            refs.tree!.methods.expand('2-2-2');
            refs.tree!.methods.setCurrent('2-2-2');
          }}/>
        </ButtonGroup>
        <Table showRows={10}>
          <PlcIndex/>
          <PlcTree
            title={'名称'}
            ref={onRef.tree}
            data={treeData}
            keyField="id"
            field="name"
            childrenField="subs"
            folderExpandIcon="pi-minus"
            folderCollapseIcon="pi-plus"
            leafIcon="pi-user"
          />
          <Plc title={'编号'} field={'id'}/>
          <Plc title={'名称'} field={'name'}/>
        </Table>
      </DemoRow>
    );
  });

  const DemoVirtual = designPage(() => {

    const { refs, onRef } = useRefs({ tree: PlcTree });

    const state = reactive({
      checked: [] as any[],
    });

    return () => (
      <DemoRow title="虚拟滚动">
        <ButtonGroup style={{ margin: '4px 0' }}>
          <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
          <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
          <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['1144179485591994368'])}/>
          <Button label="当前选中节点" onClick={() => {
            const current = refs.tree!.methods.getCurrent();
            $message(!!current ? current.data.name : '未选中任何节点！');
          }}/>
        </ButtonGroup>
        <ButtonGroup style={{ margin: '4px 0' }}>
          <Button onClick={() => {$message(state.checked?.map(i => i.name).join('_'));}}>获取绑定节点</Button>
          <Button mode="fill">多值绑定：{state.checked?.map(i => i.name).join('，')}</Button>
        </ButtonGroup>

        <ButtonGroup style={{ margin: '4px 0' }}>
          <Button label="全部选中" onClick={() => refs.tree!.methods.checkAll()}/>
          <Button label="全部取消" onClick={() => refs.tree!.methods.unCheckAll()}/>
          <Button label="根据key选中部分节点" onClick={() => refs.tree!.methods.check(['2-2-2', '3-1-2', '3-2-1'])}/>
        </ButtonGroup>

        <Table showRows={10} virtual>
          <PlcIndex/>
          <PlcTree
            title={'名称'}
            v-model={state.checked}
            ref={onRef.tree}
            data={addressData}
            keyField="id"
            field="name"
            childrenField="children"
            multiple
          />
          <Plc title={'编号'} field={'id'}/>
          <Plc title={'名称'} field={'name'}/>
        </Table>
      </DemoRow>
    );
  });

  const DemoDraggable = designPage(() => {

    const { refs, onRef } = useRefs({ tree: PlcTree });

    const isLeaf = (nodeData: any) => {
      return !nodeData.subs || nodeData.subs.length === 0;
    };

    return () => (
      <DemoRow title="可拖拽">
        <ButtonGroup style={{ margin: '4px 0' }}>
          <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
          <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
          <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
          <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
          <Button label="当前选中节点" onClick={() => {
            const current = refs.tree!.methods.getCurrent();
            $message(!!current ? current.data.name : '未选中任何节点！');
          }}/>
          <Button label="展开并且设置当前选中节点" onClick={() => {
            refs.tree!.methods.expand('2-2-2');
            refs.tree!.methods.setCurrent('2-2-2');
          }}/>
        </ButtonGroup>

        <Table showRows={10}>
          <PlcIndex/>
          <PlcTree
            ref={onRef.tree}
            data={treeData}
            keyField="id"
            field="name"
            childrenField="subs"
            draggable
            defaultExpandAll
            isLeaf={isLeaf}
          />

          <Plc title={'编号'} field={'id'}/>
          <Plc title={'名称'} field={'name'}/>
        </Table>
      </DemoRow>
    );
  });

  const DemoCheckAbleDraggable = designPage(() => {

    const { refs, onRef } = useRefs({ tree: PlcTree });

    const state = reactive({
      checked: [] as any[],
    });

    const isLeaf = (nodeData: any) => {
      return !nodeData.subs || nodeData.subs.length === 0;
    };

    return () => (
      <DemoRow title="可拖拽 + 可选中">
        <ButtonGroup style={{ margin: '4px 0' }}>
          <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
          <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
          <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
          <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
          <Button label="当前选中节点" onClick={() => {
            const current = refs.tree!.methods.getCurrent();
            $message(!!current ? current.data.name : '未选中任何节点！');
          }}/>
          <Button label="展开并且设置当前选中节点" onClick={() => {
            refs.tree!.methods.expand('2-2-2');
            refs.tree!.methods.setCurrent('2-2-2');
          }}/>
        </ButtonGroup>

        <ButtonGroup style={{ margin: '4px 0' }}>
          <Button onClick={() => {$message(state.checked?.map(i => i.name).join('_'));}}>获取绑定节点</Button>
          <Button mode="fill">多值绑定：{state.checked?.map(i => i.name).join('，')}</Button>
        </ButtonGroup>

        <ButtonGroup style={{ margin: '4px 0' }}>
          <Button label="全部选中" onClick={() => refs.tree!.methods.checkAll()}/>
          <Button label="全部取消" onClick={() => refs.tree!.methods.unCheckAll()}/>
          <Button label="根据key选中部分节点" onClick={() => refs.tree!.methods.check(['2-2-2', '3-1-2', '3-2-1'])}/>
        </ButtonGroup>

        <Table showRows={10}>
          <PlcIndex/>
          <PlcTree
            v-model={state.checked}
            multiple
            ref={onRef.tree}
            data={treeData}
            keyField="id"
            field="name"
            childrenField="subs"
            draggable
            defaultExpandAll
            isLeaf={isLeaf}
          />

          <Plc title={'编号'} field={'id'}/>
          <Plc title={'名称'} field={'name'}/>
        </Table>
      </DemoRow>
    );
  });

  const DemoAllowDraggable = designPage(() => {

    const { refs, onRef } = useRefs({ tree: PlcTree });

    const isLeaf = (nodeData: any) => {
      return !nodeData.subs || nodeData.subs.length === 0;
    };
    const isAllowDraggable: iTreeProps["isAllowDraggable"] = (dragNode) => {
      return !dragNode.data.id.startsWith('2-2');
    };
    const isAllowDroppable: iTreeProps["isAllowDroppable"] = (dragNode, modeNode) => {
      return !modeNode.data.id.startsWith('3');
    };

    return () => (
      <DemoRow title="可拖拽可放置控制">
        <Alert style={{ marginBottom: '8px' }}>
          <div>2-2开头的id不能被拖拽</div>
          <div>3开头的id不能放置任何节点</div>
        </Alert>
        <ButtonGroup style={{ margin: '4px 0' }}>
          <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
          <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
          <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
          <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
          <Button label="当前选中节点" onClick={() => {
            const current = refs.tree!.methods.getCurrent();
            $message(!!current ? current.data.name : '未选中任何节点！');
          }}/>
          <Button label="展开并且设置当前选中节点" onClick={() => {
            refs.tree!.methods.expand('2-2-2');
            refs.tree!.methods.setCurrent('2-2-2');
          }}/>
        </ButtonGroup>

        <Table showRows={10}>
          <PlcIndex/>
          <PlcTree
            ref={onRef.tree}
            data={treeData}
            keyField="id"
            field="name"
            childrenField="subs"
            draggable
            defaultExpandAll
            isLeaf={isLeaf}
            isAllowDraggable={isAllowDraggable}
            isAllowDroppable={isAllowDroppable}
          />
          <Plc title={'编号'} field={'id'}/>
          <Plc title={'名称'} field={'name'}/>
        </Table>
      </DemoRow>
    );
  });

  const DemoVirtualDraggable = designPage(() => {

    const { refs, onRef } = useRefs({ tree: PlcTree });

    const state = reactive({
      checked: [] as any[],
    });

    return () => (
      <DemoRow title="虚拟滚动+拖拽+多选 示例">
        <ButtonGroup style={{ margin: '4px 0' }}>
          <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
          <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
          <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
          <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
          <Button label="当前选中节点" onClick={() => {
            const current = refs.tree!.methods.getCurrent();
            $message(!!current ? current.data.name : '未选中任何节点！');
          }}/>
          <Button label="展开并且设置当前选中节点" onClick={() => {
            refs.tree!.methods.expand('2-2-2');
            refs.tree!.methods.setCurrent('2-2-2');
          }}/>
        </ButtonGroup>
        <Table showRows={10} virtual>
          <PlcIndex/>
          <PlcTree
            v-model={state.checked}
            ref={onRef.tree}
            data={addressData}
            keyField="id"
            field="name"
            childrenField="children"
            multiple
            draggable
          />
          <Plc title={'编号'} field={'id'}/>
          <Plc title={'名称'} field={'name'}/>
        </Table>
      </DemoRow>
    );
  });

  return () => !demoAddressData.loading && !demoTreeData.loading && <>
    <Demo1/>
    <DemoSingle/>
    <DemoSingleAll/>
    <DemoMultiple/>
    <DemoSize/>
    <DemoLazy/>
    <DemoMultipleStrict/>
    <DemoMultipleDisableCheck/>
    <DemoScopedSlot/>
    <DemoNodeIcon/>
    <DemoAccording/>
    <DemoFilter/>
    <DemoIcon/>
    <DemoVirtual/>
    <DemoDraggable/>
    <DemoCheckAbleDraggable/>
    <DemoAllowDraggable/>
    <DemoVirtualDraggable/>
  </>;
});
